<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>header</title>
    <link rel="stylesheet" href="css/element.css">
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<div id="box">
    <main class="el-main">
        <h2>主面板</h2>
        <div class="el-row" style="margin-left: -10px; margin-right: -10px;">
            <div class="el-col el-col-6" style="padding-left: 10px; padding-right: 10px;">
                <div class="el-card is-always-shadow"><!---->
                    <div class="el-card__body">
                        <div class="progress-details d-flex align-items-end justify-content-between">
                            <div class="title"><strong>新增用户</strong></div>
                            <div class="number dashtext-1">27</div>
                        </div>
                        <div role="progressbar" aria-valuenow="27"
                             aria-valuemin="0" aria-valuemax="100"
                             class="el-progress el-progress--line
                         el-progress--without-text">
                            <div class="el-progress-bar">
                                <div class="el-progress-bar__outer"
                                     style="height: 6px; background-color: rgb(235, 238, 245);">
                                    <div class="el-progress-bar__inner" style="width: 27%;"><!----></div>
                                </div>
                            </div><!---->
                        </div>
                    </div>
                </div>
            </div>
            <div class="el-col el-col-6" style="padding-left: 10px; padding-right: 10px;">
                <div class="el-card is-always-shadow"><!---->
                    <div class="el-card__body">
                        <div class="progress-details d-flex align-items-end justify-content-between">
                            <div class="title"><strong>新增文章</strong></div>
                            <div class="number dashtext-3">140</div>
                        </div>
                        <div role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"
                             class="el-progress el-progress--line el-progress--without-text">
                            <div class="el-progress-bar">
                                <div class="el-progress-bar__outer"
                                     style="height: 6px; background-color: rgb(235, 238, 245);">
                                    <div class="el-progress-bar__inner" style="width: 40%;"><!----></div>
                                </div>
                            </div><!----></div>
                    </div>
                </div>
            </div>
            <div class="el-col el-col-6" style="padding-left: 10px; padding-right: 10px;">
                <div class="el-card is-always-shadow"><!---->
                    <div class="el-card__body">
                        <div class="progress-details d-flex align-items-end justify-content-between">
                            <div class="title"><strong>新开会议</strong></div>
                            <div class="number dashtext-6">8</div>
                        </div>
                        <div role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"
                             class="el-progress el-progress--line el-progress--without-text">
                            <div class="el-progress-bar">
                                <div class="el-progress-bar__outer"
                                     style="height: 6px; background-color: rgb(235, 238, 245);">
                                    <div class="el-progress-bar__inner" style="width: 40%;"><!----></div>
                                </div>
                            </div><!----></div>
                    </div>
                </div>
            </div>
        </div>
        <section>
            <div id="main" _echarts_instance_="ec_1747813824873"
                 style="width: 80%; height: 400px; margin-top: 20px; -webkit-tap-highlight-color: transparent; user-select: none; position: relative;">
                <div style="position: relative; width: 1173px; height: 400px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
                    <canvas data-zr-dom-id="zr_0" width="1302" height="444"
                            style="position: absolute; left: 0px; top: 0px; width: 1173px; height: 400px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
                </div>
                <div style="position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px / 21px &quot;Microsoft YaHei&quot;; padding: 5px; left: 680px; top: 151px; pointer-events: none;">
                    05.18<br><span
                        style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#c23531;"></span>新增用户:
                    4<br><span
                        style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#2f4554;"></span>新增文章:
                    14<br><span
                        style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#61a0a8;"></span>新开会议:
                    7
                </div>
            </div>
        </section>
    </main>
</div>

<script src="js/vue.min.js"></script>
<script src="js/element.js"></script>
<script src="js/echarts.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                defaultOpeneds: ['1', '2', '3'],
                activeIndex: '1'
            };
        },
        methods: {
            logout() {
                // Logout logic here
                window.location.href = "index.html";
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        },
        mounted() {
            var date = new Date();
            var days = [];

            for (var i = -6; i <= 0; i++) {
                date.setDate(date.getDate() + i);
                var month = date.getMonth() + 1;
                var day = date.getDate();
                if (month < 10) month = "0" + month;
                if (day < 10) day = "0" + day;
                days.push(month + "." + day);
                date.setDate(date.getDate() - i);
            }

            var myChart = echarts.init(document.getElementById('main'));
            var option = {
                title: {text: '数据汇总'},
                tooltip: {trigger: 'axis', axisPointer: {type: 'cross', label: {backgroundColor: '#aaaaff'}}},
                legend: {data: ['新增用户', '新增文章', '新开会议']},
                toolbox: {feature: {saveAsImage: {}}},
                grid: {left: '3%', right: '4%', bottom: '3%', containLabel: true},
                xAxis: [{type: 'category', boundaryGap: false, data: days}],
                yAxis: [{type: 'value'}],
                series: [
                    {name: '新增用户', type: 'line', stack: '总量', areaStyle: {}, data: [3, 5, 7, 4, 6, 2, 6, 3, 4]},
                    {name: '新增文章', type: 'line', stack: '总量', areaStyle: {}, data: [15, 10, 12, 14, 12, 9, 10, 11, 8]},
                    {
                        name: '新开会议',
                        type: 'line',
                        stack: '总量',
                        label: {normal: {show: true, position: 'top'}},
                        areaStyle: {},
                        data: [8, 8, 9, 7, 9, 12, 13, 10, 11]
                    }
                ]
            };

            myChart.setOption(option);
        }
    });
</script>
</body>
</html>